<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />

    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }
        .box{
            width: 47rem;
            background-color: rgb(244, 244, 244);
        }
        .div1{
            width: 47rem;
            height: 14rem;
            position: relative;
            background-color: rgb(244, 244, 244);
        }
        .d1{
            width: 45rem;
            height: 4rem;
            position: absolute;
            top: 3rem;
            left: 1rem;
            background-color: rgb(227, 227, 229);
            border-radius: 1rem;
            text-align: center;
            line-height: 4rem;
            font-size: 2rem;
        }
        .d4{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 0.5rem;
            right: 1rem;
        }
        .img1{
            width: 2rem;
            height: 2rem;
        }
        .d2{
            width: 45rem;
            height: 4rem;
            position: absolute;
            top: 10rem;
            left: 1rem;
        }
        .d3{
            width: 1rem;
            height: 2rem;
            position: absolute;
            left: 1rem;
            top: 0.5rem;
        }
        .img2{
            width: 1rem;
            height: 2rem;
        }
        .p2{
            width: 5rem;
            height: 2rem;
            position: absolute;
            top: 0;
            left: 16rem;
            color: red;
            font-size: 2rem;
            text-align: center;
        }
        .p3{
            width: 5rem;
            height: 2rem;
            position: absolute;
            top: 0;
            left: 22rem;
            color: rgb(139, 138, 138);
            font-size: 2rem;
            text-align: center;
        }
        .p4{
            width: 5rem;
            height: 2rem;
            position: absolute;
            top: 0;
            left: 29rem;
            color: rgb(139, 138, 138);
            font-size: 2rem;
            text-align: center;
        }
        .d001{
            width: 5rem;
            height: 0.3rem;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 16rem;
        }

        .swiper-container {
            width: 47rem;
            height: 47rem;
            position: relative;
        }  
        .swiper-slide{
            width: 47rem;
            height: 47rem;
        }
        .img3{
            width: 47rem;
            height: 47rem;
        }
        .d5{
            width: 4rem;
            height: 3rem;
            background-color: rgb(204,204,204);
            color: white;
            font-size: 1.5rem;
            text-align: center;
            line-height: 3rem;
            border-radius: 1.5rem;
            position: absolute;
            right: 2rem;
            bottom: 1rem;
            z-index: 1;
        }
        .swiper-button-prev{
            color: white;
        }
        .swiper-button-next{
            color: white;
        }

        .div2{
            width: 47rem;
            height: 25rem;
            position: relative;
            background-color: white;
        }
        .d6{
            width: 43rem;
            height: 4rem;
            font-size: 1.2rem;
            line-height: 2rem;
            position: absolute;
            left: 1rem;
            top: 2rem;
        }
        .s1{
            background-color: red;
            color: white;
        }
        .s2{
            font-size: 1.7rem;
        }
        .p5{
            width: 44rem;
            height: 3rem;
            font-size: 1.2rem;
            color: darkgrey;
            position: absolute;
            top: 7rem;
            left: 1rem;
        }
        .p6{
            width: 44rem;
            height: 3rem;
            font-size: 1.2rem;
            color: red;
            position: absolute;
            top: 11rem;
            left: 1rem;
        }
        .p7{
            width: 10rem;
            height: 2rem;
            font-size: 2rem;
            color: red;
            position: absolute;
            top: 16rem;
            left: 1rem;
            font-weight: 800;
        }
        .p8{
            width: 2.5rem;
            height: 1.5rem;
            background-color: goldenrod;
            color: white;
            position: absolute;
            left: 12rem;
            top: 16.5rem;
            text-align: center;
            line-height: 1.5rem;
        }
        .p9{
            width: 3rem;
            height: 1rem;
            font-size: 1.2rem;
            color: rgb(163, 162, 162);
            position: absolute;
            left: 1rem;
            top: 21rem;
        }
        .d7{
            width: 12rem;
            height: 3rem;
            overflow: hidden;
            border: 0.1rem solid rgb(163, 161, 161);
            position: absolute;
            top: 20rem;
            left: 6rem;
        }
        .d002{
            width: 3rem;
            height: 3rem;
            border-right: 0.1rem solid rgb(163, 161, 161);
            font-size: 2rem;
            line-height: 3rem;
            text-align: center;
            float: left;
            color: rgb(163, 161, 161);
        }
        .d004{
            width: 3rem;
            height: 3rem;
            border-left: 0.1rem solid rgb(163, 161, 161);
            font-size: 2rem;
            line-height: 3rem;
            text-align: center;
            float: left;
            color: rgb(163, 161, 161);
        }
        .d003{
            width: 5.8rem;
            height: 3rem;
            font-size: 2rem;
            line-height: 3rem;
            text-align: center;
            float: left;
            color: rgb(124, 124, 124);
        }
        .p10{
            width: 6rem;
            height: 2rem;
            font-size: 1.5rem;
            color: red;
            line-height: 2rem;
            position: absolute;
            left: 19rem;
            top: 21rem;
        }

        .div3{
            width: 47rem;
            height: 10rem;
            background-color: white;
            margin: 2rem 0;
            position: relative;
        }
        .p11{
            width: 3rem;
            height: 1rem;
            font-size: 1.2rem;
            color: rgb(163, 162, 162);
            position: absolute;
            left: 1rem;
            top: 2rem;
        }
        .d8{
            width: 1.5rem;
            height: 2rem;
            position: absolute;
            top: 2rem;
            left: 6rem;
        }
        .img4{
            width: 2rem;
            height: 2rem;
        }
        .p12{
            width: 16rem;
            height: 2rem;
            font-size: 1.5rem;
            line-height: 2rem;
            position: absolute;
            top: 2rem;
            left: 8rem;
        }
        .d9{
            width: 1rem;
            height: 2rem;
            position: absolute;
            right: 2rem;
            top: 2rem;
        }
        .img5{
            width: 1rem;
            height: 2rem;
        }
        .d10{
            width: 28rem;
            height: 2rem;
            font-size: 1.5rem;
            line-height: 2rem;
            color: rgb(163, 162, 162);
            position: absolute;
            top: 4rem;
            left: 6rem;
        }
        .s3{
            color: red;
        }
        .d11{
            width: 9rem;
            height: 2rem;
            position: absolute;
            left: 5rem;
            top: 7rem;
        }
        .img6{
            width: 7rem;
            height: 1.5rem;
        }
        .d12{
            width: 9rem;
            height: 2rem;
            position: absolute;
            left: 19rem;
            top: 7rem;
        }
        .img7{
            width: 7rem;
            height: 1.5rem;
        }
        .d13{
            width: 8rem;
            height: 2rem;
            position: absolute;
            left: 34rem;
            top: 7rem;
        }
        .img8{
            width: 6.4rem;
            height: 1.5rem;
        }

        .div4{
            width: 47rem;
            height: 40rem;
            background-color: white;
            margin-bottom: 2rem;
        }
        .d14{
            width: 47rem;
            height: 5rem;
            position: relative;
        }
        .p13{
            width: 10rem;
            height: 2rem;
            font-size: 1.5rem;
            line-height: 2rem;
            position: absolute;
            left: 1rem;
            top: 2rem;
        }
        .d18{
            width: 10rem;
            height: 2rem;
            font-size: 1.5rem;
            line-height: 2rem;
            position: absolute;
            right: 4rem;
            top: 2rem;
            text-align: right;
        }
        .s6{
            color: red;
        }
        .d15{
            width: 47rem;
            height: 13rem;
            position: relative;
            border-bottom: 0.1rem solid rgb(216, 215, 215);
        }
        .d19{
            width: 47rem;
            height: 11rem;
            position: relative;
            border-bottom: 0.1rem solid rgb(211, 209, 209);
        }
        .d16{
            width: 2.5rem;
            height: 2.5rem;
            position: absolute;
            left: 1rem;
            top: 1rem;
        }
        .img9{
            width: 2.5rem;
            height: 2.5rem;
        }
        .p14{
            width: 5rem;
            height: 1rem;
            font-size: 1.2rem;
            position: absolute;
            top: 1.2rem;
            left: 4rem;
        }
        .d17{
            width: 6rem;
            height: 1rem;
            position: absolute;
            top: 1.2rem;
            left: 11rem;
        }
        .p15{
            width: 44rem;
            height: 4rem;
            line-height: 2rem;
            font-size: 1.4rem;
            position: absolute;
            top: 4rem;
            left: 1rem;
        }
        .p16{
            width: 44rem;
            height: 2rem;
            line-height: 2rem;
            font-size: 1.4rem;
            position: absolute;
            top: 9rem;
            left: 1rem;
            color: rgb(146, 145, 145);
        }
        .p17{
            width: 44rem;
            height: 2rem;
            line-height: 2rem;
            font-size: 1.4rem;
            position: absolute;
            top: 4rem;
            left: 1rem;
        }
        .p18{
            width: 44rem;
            height: 2rem;
            line-height: 2rem;
            font-size: 1.4rem;
            position: absolute;
            top: 7rem;
            left: 1rem;
            color: rgb(146, 145, 145);
        }

        .div5{
            width: 47rem;
            height: 14rem;
            position: relative;
            background-color: white;
            margin-bottom: 2rem;
        }
        .d20{
            width: 9rem;
            height: 4rem;
            position: absolute;
            left: 1rem;
            top: 2rem;
        }
        .img11{
            width: 9rem;
            height: 4rem;
        }
        .p19{
            width: 11rem;
            height: 2rem;
            font-size: 2rem;
            position: absolute;
            top: 2rem;
            left: 11rem;
        }
        .p20{
            width: 3rem;
            height: 1.5rem;
            background-color: red;
            color: white;
            position: absolute;
            left: 23rem;
            top: 2rem;
            text-align: center;
            line-height: 1.5rem;
        }
        .d21{
            width: 6rem;
            height: 1rem;
            position: absolute;
            top: 5rem;
            left: 11rem;
        }
        .d22{
            width: 1rem;
            height: 2rem;
            position: absolute;
            right: 2rem;
            top: 3rem;
        }
        .d005{
            background-color:  rgb(211, 209, 209);
            position: absolute;
            left: 1rem;
            top: 8rem;
            width: 46rem;
            height: 0.1rem;
        }
        .d23{
            width: 20rem;
            height: 3rem;
            font-size: 1.3rem;
            line-height: 3rem;
            border-top: 0.1rem solid rgb(163, 162, 162);
            border-bottom: 0.1rem solid rgb(163, 162, 162);
            text-align: center;
            border-radius: 0.5rem;
            position: absolute;
            top: 10rem;
            left: 1rem;
        }
        .d24{
            width: 20rem;
            height: 3rem;
            font-size: 1.3rem;
            line-height: 3rem;
            border-top: 0.1rem solid rgb(163, 162, 162);
            border-bottom: 0.1rem solid rgb(163, 162, 162);
            text-align: center;
            border-radius: 0.5rem;
            position: absolute;
            top: 10rem;
            left: 25rem;
        }

        .div6{
            width: 47rem;
            height: 6rem;
            line-height: 6rem;
            text-align: center;
            position: relative;
            background-color: white;
            font-size: 2rem;
        }
        .d29{
            width: 1rem;
            height: 2rem;
            position: absolute;
            right: 2rem;
            top: 0.7rem;
        }
        .img14{
            width: 1rem;
            height: 2rem;
        }

        .div7{
            width: 47rem;
            height: 6rem;
            position: relative;
        }
        .d25{
            width: 3rem;
            height: 4rem;
            text-align: center;
            position: absolute;
            top: 1rem;
            left: 5rem;
        }
        .img12{
            width: 2.5rem;
            height: 2.5rem;
        }
        .p21{
            width: 3rem;
            height: 1rem;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .d26{
            width: 4rem;
            height: 4rem;
            text-align: center;
            position: absolute;
            top: 1rem;
            left: 12rem;
        }
        .img13{
            width: 2.5rem;
            height: 2.5rem;
        }
        .p22{
            width: 4rem;
            height: 1rem;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .d006{
            width: 2rem;
            height: 2rem;
            background-color: red;
            color: white;
            border-radius: 50%;
            line-height: 2rem;
            font-size: 1.5rem;
            text-align: center;
            position: absolute;
            top: -0.6rem;
            right: -0.6rem;
        }
        .d27{
            width: 13rem;
            height: 6rem;
            font-size: 2rem;
            color: white;
            background-color: red;
            line-height: 6rem;
            text-align: center;
            position: absolute;
            right: 13rem;
            top: 0;
        }
        .d28{
            width: 13rem;
            height: 6rem;
            font-size: 2rem;
            color: white;
            background-color: rgb(255, 166, 0);
            line-height: 6rem;
            text-align: center;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            <div class="d1">
                    gome.com.cn
                <div class="d4">
                    <img src="img/jian.png" alt="" class="img1">
                </div>
            </div>
            <div class="d2">
                <div class="d3">
                    <img src="img/navleft.png" alt="" class="img2">
                </div>
                <div class="p2">商品</div>
                <div class="p3">详情</div>
                <div class="p4">评价</div>
                <div class="d001"></div>
            </div>
        </div>

        
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="img/lunbo.png" alt="" class="img3">
                        <div class="d5">1/5</div>
                    </div>
                    <div class="swiper-slide">
                        <img src="img/lunbo.png" alt="" class="img3">
                        <div class="d5">2/5</div>
                    </div>
                    <div class="swiper-slide">
                        <img src="img/lunbo.png" alt="" class="img3">
                        <div class="d5">3/5</div>
                    </div>
                    <div class="swiper-slide">
                        <img src="img/lunbo.png" alt="" class="img3">
                        <div class="d5">4/5</div>
                    </div>
                    <div class="swiper-slide">
                        <img src="img/lunbo.png" alt="" class="img3">
                        <div class="d5">5/5</div>
                    </div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        
        <div class="div2">
            <div class="d6">
                <span class="s1">自营</span>
                <span class="s2">Apple MacBook Air MD760
                    CH/Bi 13.3英寸宽屏笔记本电脑</span>
            </div>
            <div class="p5">
                Wine, grapes, fruit or juice after fermentation 
                to brew alcoholic beverages from the. In the fruit,
                 because of high glucose content ...
            </div>
            <div class="p6">
                2014年新款MacBook Air，CPU全新升级，长达12小时的
                电池使用时间，满载动力，满足你的一天！
            </div>
            <div class="p7">￥6288.00</div>
            <div class="p8">包邮</div>
            <div class="p9">数量</div>
            <div class="d7">
                <div class="d002">-</div>
                <div class="d003">2</div>
                <div class="d004">+</div>
            </div>
            <div class="p10">仅剩三件</div>
        </div>
        

        <div class="div3">
            <div class="p11">送至</div>
            <div class="d8">
                <img src="img/position.png" alt="" class="img4">
            </div>
            <div class="p12">
                北京市 丰台区 五环内
            </div>
            <div class="d9">
                <img src="img/右箭头.png" alt="" class="img5">
            </div>
            <div class="d10">
                <span class="s3">现货</span>
                <span class="s4">由 国美酒窖 发货并负责售后服务</span>
            </div>
            <div class="d11">
                <img src="img/正品保证.png" alt="" class="img6">
            </div>
            <div class="d12">
                <img src="img/闪电送达.png" alt="" class="img7">
            </div>
            <div class="d13">
                <img src="img/慢就赔.png" alt="" class="img8">
            </div>
        </div>

        <div class="div4">
            <div class="d14">
                <div class="p13">评价(13434)</div>
                <div class="d18">
                    <span class="s5">好评度：</span>
                    <span class="s6">98%</span>
                </div>
                <div class="d9">
                    <img src="img/右箭头.png" alt="" class="img5">
                </div>
            </div>

            <div class="d15">
                <div class="d16">
                    <img src="img/hend.png" alt="" class="img9">
                </div>
                <div class="p14">齐***疯</div>
                <div class="d17">
                    <img src="img/xingxing.png" alt="" class="img10">
                </div>
                <div class="p15">
                    忠实的果粉，外观漂亮、轻薄、携带方便，配置也不错，
                    国美发货也快，快递员服务态度超好，当然5分评。
                </div>
                <div class="p16">
                    颜色:银灰 版本:全网通
                </div>
            </div>

            <div class="d19">
                <div class="d16">
                    <img src="img/hend.png" alt="" class="img9">
                </div>
                <div class="p14">齐***疯</div>
                <div class="d17">
                    <img src="img/xingxing.png" alt="" class="img10">
                </div>
                <div class="p17">
                    忠实的果粉，外观漂亮、轻薄、携带方便，配置也不错。
                </div>
                <div class="p18">
                    颜色:银灰 版本:全网通
                </div>
            </div>

            <div class="d19">
                <div class="d16">
                    <img src="img/hend.png" alt="" class="img9">
                </div>
                <div class="p14">齐***疯</div>
                <div class="d17">
                    <img src="img/xingxing.png" alt="" class="img10">
                </div>
                <div class="p17">
                    忠实的果粉，外观漂亮、轻薄、携带方便，配置也不错。
                </div>
                <div class="p18">
                    颜色:银灰 版本:全网通
                </div>
            </div>
        </div>


        <div class="div5">
            <div class="d20">
                <img src="img/tianou2.png" alt="" class="img11">
            </div>
            <div class="p19">天喔专营店</div>
            <div class="p20">自营</div>
            <div class="d21">
                <img src="img/xingxing.png" alt="" class="img10">
            </div>
            <div class="d22">
                <img src="img/右箭头.png" alt="" class="img5">
            </div>
            <div class="d005"></div>
            <div class="d23">联系客服</div>
            <div class="d24">进入店铺</div>
        </div>

        <div class="div6">
            查看全部图文详情
            <div class="d29">
                <img src="img/右箭头.png" alt="" class="img14">
            </div>
        </div>

        <div class="div7">
            <div class="d25">
                <img src="img/13214.png" alt="" class="img12">
                <div class="p21">收藏</div>
            </div>
            <div class="d26">
                <img src="img/cart.png" alt="" class="img13">
                <div class="p22">购物车</div>
                <div class="d006">4</div>
            </div>
            <div class="d27">加入购物车</div>
            <div class="d28">立即购买</div>
        </div>
    </div>


    <script src="js/swiper-bundle.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    
    
    <script>
        function setHTML() {
            var baseVal = 16;
            var pageWidth = 750;
            var screenWidth = screen.width;
            var fz = screenWidth * baseVal / pageWidth;
            document.querySelector("html").style.fontSize = fz + "px";
        }
        window.onresize = function () {
            setHTML();
        }

        var mySwiper = new Swiper ('.swiper-container', {
          loop: true,
          autoplay: {
            delay: 2000,
            disableOnInteraction: false,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        })   
        
        var num = $(".d003").text();
        console.log(num)

        $(".d002").on("click",function(){
            num--;
            $(".d003").html(num)
        })

        $(".d004").on("click",function(){
            num++;
            $(".d003").html(num)
        })

        $(".d3").click(function(){
			window.location.href="订单.html";
		})

        $(".d24").click(function(){
			window.location.href="店铺.html";
		})
    </script>
</body>
</html>